import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
} from 'react-native';
import Util from '../../../util/util';
export default class recharge extends Component < {} > {
  constructor() {
    super();
    this.state = {
      btn10: true,
      btn20: false,
      btn30: false,
      btn40: false,
      btn50: false,
      btn60: false,
    }
  }
  static navigationOptions = {
    headerTitle: '充值'
  }
  render() {
    return(
      <View style={styles.container} >
        <View style={styles.btnsView}>
          <View style={styles.rowView} >
            <TouchableOpacity style={[styles.BtnStyle,{marginLeft: 20,marginTop: 20,backgroundColor: this.state.btn10 ? 'red' : '#fff'}]} onPress={this._pay.bind(this,10)} >
              <Text style={{margin:10,color: this.state.btn10 ? '#fff' : 'red'}} >10元</Text>
            </TouchableOpacity>
            <TouchableOpacity style={[styles.BtnStyle,{marginRight: 20,marginLeft:20 ,marginTop: 20,backgroundColor: this.state.btn20 ? 'red' : '#fff'}]} onPress={this._pay.bind(this,20)} >
              <Text style={{margin:10,color:this.state.btn20 ? '#fff' : 'red'}} >20元</Text>
            </TouchableOpacity>
          </View>
          <View style={styles.rowView} >
            <TouchableOpacity style={[styles.BtnStyle,{marginLeft: 20,marginTop: 20,backgroundColor: this.state.btn30 ? 'red' : '#fff'}]} onPress={this._pay.bind(this,30)} >
              <Text style={{margin:10,color:this.state.btn30 ? '#fff' : 'red'}} >30元</Text>
            </TouchableOpacity>
            <TouchableOpacity style={[styles.BtnStyle,{marginRight: 20,marginLeft:20 ,marginTop: 20,backgroundColor: this.state.btn40 ? 'red' : '#fff'}]} onPress={this._pay.bind(this,40)} >
              <Text style={{margin:10,color:this.state.btn40 ? '#fff' : 'red'}} >40元</Text>
            </TouchableOpacity>
          </View>
          <View style={styles.rowView} >
            <TouchableOpacity style={[styles.BtnStyle,{marginLeft: 20,marginTop: 20, marginBottom: 20,backgroundColor: this.state.btn50 ? 'red' : '#fff'}]} onPress={this._pay.bind(this,50)} >
              <Text style={{margin:10,color:this.state.btn50 ? '#fff' : 'red'}} >50元</Text>
            </TouchableOpacity>
            <TouchableOpacity style={[styles.BtnStyle,{marginRight: 20,marginLeft:20 ,marginTop: 20,marginBottom: 20,backgroundColor: this.state.btn60 ? 'red' : '#fff'}]} onPress={this._pay.bind(this,60)} >
              <Text style={{margin:10,color:this.state.btn60 ? '#fff' : 'red'}} >60元</Text>
            </TouchableOpacity>
          </View>
        </View>
        <TouchableOpacity style={styles.rechargeBtnStyle} onPress={this._recharge.bind(this)} >
          <Text style={{margin:10,color:'#fff'}} >充值</Text>
        </TouchableOpacity>
      </View>
    )
  }
  _recharge() {
    alert('充值')
  }
  _pay(tag) {
    // alert(tag)
    switch (tag) {
      case 10:
        this.setState({
          btn10: !this.state.btn10,
          btn20: false,
          btn30: false,
          btn40: false,
          btn50: false,
          btn60: false,
        })
        break;
      case 20:
        this.setState({
          btn20: !this.state.btn20,
          btn10: false,
          btn30: false,
          btn40: false,
          btn50: false,
          btn60: false,
        })
        break;
      case 30:
      this.setState({
        btn30: !this.state.btn30,
        btn20: false,
        btn10: false,
        btn40: false,
        btn50: false,
        btn60: false,
      })
        break;
      case 40:
        this.setState({
          btn40: !this.state.btn40,
          btn20: false,
          btn30: false,
          btn10: false,
          btn50: false,
          btn60: false,
        })
          break;
      case 50:
      this.setState({
        btn50: !this.state.btn50,
        btn20: false,
        btn30: false,
        btn40: false,
        btn10: false,
        btn60: false,
      })
        break;
      case 60:
      this.setState({
        btn60: !this.state.btn60,
        btn20: false,
        btn30: false,
        btn40: false,
        btn50: false,
        btn10: false,
      })
        break;
      default:
        break;

    }

  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  btnsView: {
    backgroundColor: '#fff'
  },
  rowView: {
    // flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  BtnStyle: {
    flex: 1,
    borderRadius: 20,
    borderWidth: Util.pixel,
    borderColor: 'red',
    alignItems: 'center',
  },
  rechargeBtnStyle: {
    backgroundColor: 'red',
    borderRadius: 20,
    alignItems: 'center',
    marginBottom: 10,
    marginTop: 100,
    padding:5,
    width: Util.size.width*0.8,
    marginLeft: Util.size.width*0.1,
  },
})
